<template>
  <div id="detail-component">
    <DetailNav @current_position="get_position" ref="detailnav"></DetailNav>

    <Scroll class="wraper" ref="scroll" @sendScroll="getscroll">
      <!-- 轮播图 -->
      <DetailSwiper :swipe_data="detail_swiper"></DetailSwiper>

      <!-- 商品信息 -->
      <DetailInfo :info_data="info" ref="goods_heigth"></DetailInfo>

      <DeatilHodong :goods_a="disconute"></DeatilHodong>

      <Dimg :img="detail_img" @images="refresh_a"></Dimg>

      <!-- 参数 -->
      <DetailTab :canshu1="c1" :canshu2="c2" ref="c_heigth"></DetailTab>

      <!-- 评论 -->
      <Comnent :comment_component="comment" ref="comment_heigth"></Comnent>

      <!-- 推荐商品 -->
      <Goods
        :goods="comment_datas"
        ref="Tuijian_heigth"
        @images="images_a"
      ></Goods>
    </Scroll>

    <!-- 置顶 -->
    <Gotop v-if="isTop" @click.native="back"></Gotop>

    <!-- 加入购物车 -->
    <DetailBottombar @addcart="addcart"></DetailBottombar>
  </div>
</template>

<script>
import DetailNav from "@/views/home/detail/detail_item/Detail_nav.vue"
//轮播图组件
import DetailSwiper from "@/views/home/detail/detail_item/Detail_swiper.vue"
//商品信息
import DetailInfo from "@/views/home/detail/detail_item/Detail_info.vue"
import DeatilHodong from "@/views/home/detail/detail_item/Detail_hodong.vue"
import Dimg from "@/views/home/detail/detail_item/Detail_image.vue"
import Scroll from "@/components/scroll/Scroll.vue"
import DetailTab from "@/views/home/detail/detail_item/Detail_tab.vue"
import Comnent from "@/views/home/detail/detail_item/Comnent.vue"
import Goods from "@/views/home/home_detail/Goods.vue"
import DetailBottombar from "@/views/home/detail/detail_item/Detail_bottombar.vue"
import Gotop from "@/components/go_top/Go_top.vue"

//导入封装的请求数据
import request from "@/netword/index.js"
//导入info请求数据
import detail_info from "@/views/home/detail/detail_item/detail_info.js"
//导入评论请求数据
import { commentData } from "@/views/home/detail/detail_item/detail_info.js"

import { debounce1 } from "@/views/home/detail/detail_item/debounce.js"
//混入
import mixin from "@/components/mixin/index.js"

export default {
  name: "Detail",
  components: {
    DetailNav,
    DetailSwiper,
    DetailInfo,
    DeatilHodong,
    Dimg,
    Scroll,
    DetailTab,
    Comnent,
    Goods,
    DetailBottombar,
    Gotop,
  },
  //记住接受vue_router的动态路由的props时 一定要跟动态路由id一致
  props: ["iid"],
  mixins: [mixin],
  data() {
    return {
      //轮播图数据
      detail_swiper: [],
      //储存info数据
      info: {},
      //商品折扣信息
      disconute: "",
      //详情的照片
      detail_img: [],
      //放置定时器变量
      times: null,
      //放置参数1
      c1: [],
      //放置参数2
      c2: [],
      //评论数据
      comment: {},
      //推荐数据
      comment_datas: [],
      //存储点击的位置
      positions: [0, 0, 0, 0],
    }
  },
  created() {
    this.get_wriper()

    this.comment_data()
  },
  methods: {
    //请求轮播图数据
    async get_wriper() {
      const { data: res } = await request({
        url: "/detail",
        params: {
          iid: this.iid,
        },
      })
      //轮播图数据
      this.detail_swiper = res.result.itemInfo.topImages

      console.log(res.result)
      //请求info数据
      this.info = new detail_info(
        res.result.itemInfo,
        res.result.columns,
        res.result.shopInfo.services
      )

      const length = this.info.services.length
      //筛选售后数据的数量
      if (length - 1 >= 3) {
        this.info.services.splice(3, length - 3)
      }

      //请求商品的折扣数据
      this.disconute = res.result.itemInfo.desc

      //请求详情页的照片
      this.detail_img = res.result.skuInfo.skus

      //获取参数1
      this.c1 = res.result.itemParams.rule.tables

      //获取参数2
      this.c2 = res.result.itemParams.info.set

      //评论数据
      this.comment = new commentData(
        res.result.rate.list[0].user,
        res.result.rate.list[0].content,
        res.result.rate.list[0].images,
        res.result.rate.list[0].created,
        res.result.rate.list[0].style
      )
    },

    //推荐数据
    async comment_data() {
      const { data: res } = await request({
        url: "/recommend",
      })
      this.comment_datas = res.data.list
      console.log(res.data)
    },

    refresh_a() {
      this.debounce(this.$refs.scroll.scroll)
    },

    //监听推荐的更新
    images_a() {
      debounce1(() => {
        // this.positions[0] = this.$refs.goods_heigth.$el.offsetTop
        this.positions[1] = this.$refs.c_heigth.$el.offsetTop
        this.positions[2] = this.$refs.comment_heigth.$el.offsetTop
        this.positions[3] = this.$refs.Tuijian_heigth.$el.offsetTop
      }, 500)()
    },
    // 封装防抖动函数
    debounce(data, delay = 200) {
      if (this.times) clearTimeout(this.times)

      this.times = setTimeout(() => {
        data.refresh()
      }, delay)
    },

    //接受详情点击的位置
    get_position(index) {
      this.$refs.scroll.gotop(0, this.positions[index] * -1, 500)
    },

    //滚动位置
    getscroll(position) {
      this.isTop = Math.abs(position.y) >= 1000

      if (
        Math.abs(position.y) >= this.positions[0] &&
        Math.abs(position.y) < this.positions[1]
      ) {
        this.$refs.detailnav.current_index = 0
      } else if (
        Math.abs(position.y) >= this.positions[1] &&
        Math.abs(position.y) < this.positions[2]
      ) {
        this.$refs.detailnav.current_index = 1
      } else if (
        Math.abs(position.y) >= this.positions[2] &&
        Math.abs(position.y) < this.positions[3]
      ) {
        this.$refs.detailnav.current_index = 2
      } else {
        this.$refs.detailnav.current_index = 3
      }
    },

    //添加购物车
    addcart() {
      console.log("提价成功")
      const cart = {}
      cart.image = this.detail_swiper[0]
      cart.title = this.info.title
      cart.iid = this.info.iid
      cart.lowNowPrice = this.info.lowNowPrice
      cart.desc = this.info.desc
      cart.count = 1
      cart.ischebox  = true
      // console.log(cart)
      // console.log(this.info.lowNowPrice)
      this.$store.dispatch("iscart", cart)
    },
  },
}
</script>

<style lang="less" scoped>
#detail-component {
  position: relative;
  background-color: #fff;
  z-index: 9;
}
.wraper {
  height: calc(100vh - 45px - 45px);
  overflow: hidden;
}
</style>
